<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="utf-8"/>
    <title>购物车</title>
    <link th:href="@{/project/css/public.css}" rel="stylesheet"/>
    <link th:href="@{/project/css/proList.css}" rel="stylesheet"/>
</head>
<body>
<!--------------------------------------cart--------------------->
<div class="head ding" th:include="include::normal_headDiv2"></div>
<div class="cart mt">
    <!-----------------site------------------->
    <div class="site">
        <p class=" wrapper clearfix">
            <span class="fl">购物车</span>
        </p>
    </div>
    <!-----------------table------------------->
    <form class="table wrapper" style="margin-bottom: 85px" id="orderForm" method="post" onsubmit="return checkGoods()" th:attr="action=@{/user/userOrder/placeOrder}">
        <div class="tr">
            <div>餐品</div>
            <div>单价</div>
            <div>数量</div>
            <div>小计</div>
            <div>操作</div>
        </div>
        <div class="th" th:each="userCart,iterStat:${userCarts}">
            <div class="pro clearfix">
                <label class="fl">
                    <input type="checkbox" class="itemCheckbox" name="goodsId" th:value="${userCart.goodsId}"/>
                    <span></span>
                </label>
                <a class="fl" th:href="@{${'/index/findGoodsById/'+userCart.goodsId}}">
                    <dl class="clearfix">
                        <dt class="fl"><img th:src="${userCart.goodsInfo.imgUrl}"></dt>
                        <dd class="fl">
                            <p th:text="${userCart.goodsInfo.goodsName}"></p>
                            <p th:text="${userCart.goodsInfo.attr1}"></p>
                            <p th:text="${userCart.goodsInfo.attr2}"></p>
                        </dd>
                    </dl>
                </a>
            </div>
            <div class="price" >￥<span th:text="${userCart.goodsInfo.goodsPrice}"></span></div>
            <div class="number">
                <p class="num clearfix">
                    <img class="fl sub" th:src="@{/img/sub.jpg}" onclick="minusOne(this)">
                    <span class="fl" th:text="${userCart.goodsNum}"></span>
                    <input type="hidden" class="num_show" name="goodsNum" th:value="${userCart.goodsNum}">
                    <img class="fl add" th:src="@{/img/add.jpg}" onclick="addOne(this)">
                </p>
            </div>
            <div class="price sAll">￥<span></span></div>
            <div class="price"><a class="del" onclick="delItem(this)" href="javascript:void(0)">删除</a></div>
        </div>

        <div class="goOn" id="emptyExist" style="display: none;">空空如也~</div>
        <div class="tr clearfix">
            <label class="fl">
                <input class="checkAll" type="checkbox" value="0"/>
                <span></span>
            </label>
            <p class="fl">
                <a href="#">全选</a>
                <!--<a href="#" class="del">删除</a>-->
            </p>
            <p class="fr">
                <span>共<small id="sl">0</small>件餐饮</span>
                <span>合计:&nbsp;￥<small id="all">0.00</small></span>
                <a href="javascript:$('#orderForm').submit();" id="order_btn" class="count">结算</a>
            </p>
        </div>
        <input type="hidden" name="isFromCart" value="1">
    </form>
</div>
<div id="footer" th:include="include::normal_footerDiv"></div>
<div th:include="include::footer_normal"></div>
<script th:src="@{/project/pro.js}"></script>
<script th:src="@{/project/cart.js}"></script>
<script type="text/javascript">

    $(function () {
        if ($(".table .th").length == 0) {
            $("#emptyExist").show();
        }
        countTotal();
    });

    function countTotal() {
        var totalPrice = 0;
        var totalNum = 0;
        var i = 0;
        $(".table .th").each(function () {
            var itemTotal = $.count.multiply($(this).find(".price span").html(), $(this).find(".num_show").val())
            $(this).find(".sAll span").html(itemTotal.toFixed(2));
            if ($(this).find(":checkbox:checked").length == 1) {
                totalPrice = $.count.add(totalPrice, itemTotal);
                totalNum = $.count.add(totalNum, $(this).find(".num_show").val());
                i++;
            }
        });
        if (i == 0) {
            $("#order_btn").addClass("disabled");
        } else {
            $("#order_btn").removeClass("disabled");
        }
        $("#all").html(totalPrice.toFixed(2));
        $("#sl").html(totalNum.toFixed(0));
    }

    function addOne(btn) {
        var value = Number($(btn).prev().val()) + 1;
        $(btn).prev().val(value);
        $(btn).prev().prev().html(value);
        updateCartNum($(btn).parents(".th").find(":checkbox").val(), value);
    }

    function minusOne(btn) {
        var value = Number($(btn).next().html()) - 1;
        value = value < 1 ? 1 : value;
        $(btn).next().html(value);
        $(btn).next().next().val(value);
        updateCartNum($(btn).parents(".th").find(":checkbox").val(), value);
    }

    function updateCartNum(goodsId, goodsNum) {
        $.ajax({
            url: ctx + "user/userCart/edit",
            type: "post",
            data: {
                "goodsId": goodsId,
                "goodsNum": goodsNum
            },
            dataType: "json",
            success: function (data) {
                if (data.code == web_status.SUCCESS) {
                    countTotal();
                }
            }
        });
    }
    $("input[type='checkbox']").on('click',function(){
        makeChoose(this);
    });
    function makeChoose(checkbox) {
        if ($(checkbox).val() == 0) {
            //全选点击
            if ($(checkbox).is(":checked")) {
                $("input.itemCheckbox").prop("checked", true);
                $(".num_show").attr("name", "goodsNum");
            } else {
                $("input.itemCheckbox").prop("checked", false);
                $(".num_show").attr("name", "");
            }
        } else {
            //条目复选框点击
            if ($(".table .th").length == $("input.itemCheckbox:checked").length) {
                $(".checkAll").prop("checked", true);
            } else {
                $(".checkAll").prop("checked", false);
            }
            //不勾选该行时，避免该行数据传到后台
            if ($(checkbox).is(":checked")) {
                $(checkbox).parents(".th").find(".num_show").attr("name", "goodsNum");
            } else {
                $(checkbox).parents(".th").find(".num_show").attr("name", "");
            }
        }
        countTotal();
    }

    //购物车删除
    function delItem(item) {
        item = $(item).parents(".th");
        $.ajax({
            url: ctx + "user/userCart/remove",
            type: "post",
            data: {
                "goodsId": $(item).find(".itemCheckbox").val()
            },
            dataType: "json",
            success: function (data) {
                if (data.code == web_status.SUCCESS) {
                    $(item).remove();
                    countTotal();
                    if ($(".table .th").length == 0) {
                        $("#emptyExist").show();
                    }
                }
            }
        });
    }

    function checkGoods() {
        //避免没有选择餐饮时提交数据
        if ($("#totalPrice").html() == 0) {
            return false;
        }
        return true;
    }

</script>
</body>
</html>
